// 卡片组件 - 固定区域布局架构
.axiom-card {
  display: flex;
  flex-direction: column;
  background-color: var(--axiom-bg-color-secondary);
  border-radius: var(--axiom-border-radius-base);
  border: var(--axiom-card-border-width, 1px) solid var(--axiom-border-color);
  box-shadow: var(--axiom-box-shadow-base);
  transition: var(--axiom-transition-base);
  overflow: hidden;
  min-height: 0;

  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));

  &:hover {
    border-color: var(--axiom-card-hover-border-color, var(--axiom-primary-color));
    box-shadow: var(--axiom-card-hover-shadow, var(--primary-glow, var(--axiom-box-shadow-primary))); // Allow theme override, with fallback
  }

  // 顶部固定区域布局
  &__top {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--axiom-card-top-bottom-padding, var(--axiom-spacing-md) var(--axiom-spacing-lg));
    min-height: var(--axiom-card-top-bottom-min-height, 48px);
    border-bottom: 1px solid var(--axiom-border-color);
    background-color: var(--axiom-bg-color-tertiary, var(--axiom-bg-color-secondary));
    
    &-left {
      flex-shrink: 0;
      min-width: 0;
      max-width: var(--axiom-card-top-left-right-max-width, 25%);
      display: flex;
      align-items: center;
    }
    
    &-center {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 0;
      padding: var(--axiom-card-center-padding, 0 var(--axiom-spacing-sm));
      
      .axiom-card__header {
        text-align: center;
        width: 100%;
        
        .axiom-card__title {
          display: block;
          font-size: var(--axiom-card-title-font-size, 1.2rem);
          font-weight: var(--axiom-card-title-font-weight, 600);
          color: var(--axiom-text-color);
          font-family: var(--axiom-card-title-font-family, var(--font-family-special, var(--axiom-font-family-base)));
          line-height: 1.4;
          margin: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        .axiom-card__subtitle {
          display: block;
          font-size: var(--axiom-card-subtitle-font-size, 0.9rem);
          color: var(--axiom-text-color-secondary);
          margin-top: var(--axiom-card-subtitle-margin-top, var(--axiom-spacing-xs));
          line-height: 1.3;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    
    &-right {
      flex-shrink: 0;
      min-width: 0;
      max-width: var(--axiom-card-top-left-right-max-width, 25%);
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }

  // 中间内容区域布局
  &__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    
    // 主体内容区域
    .axiom-card__body {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: var(--axiom-card-body-padding, 20px);
      min-height: 0;
      overflow: auto;
    }
    
    // 扩展内容区域
    .axiom-card__extra {
      flex-shrink: 0;
      padding: var(--axiom-card-extra-padding, var(--axiom-spacing-md) 20px);
      border-top: var(--axiom-card-extra-border-top, 1px solid var(--axiom-border-color-light));
      background-color: var(--axiom-card-extra-bg, rgba(var(--axiom-bg-color-tertiary, var(--axiom-bg-color-secondary)), 0.5));
    }
  }

  // 底部固定区域布局
  &__bottom {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--axiom-card-top-bottom-padding, var(--axiom-spacing-md) var(--axiom-spacing-lg));
    min-height: var(--axiom-card-top-bottom-min-height, 48px);
    border-top: 1px solid var(--axiom-border-color);
    background-color: var(--axiom-bg-color-tertiary, var(--axiom-bg-color-secondary));
    
    &-left {
      flex-shrink: 0;
      min-width: 0;
      max-width: 30%;
      display: flex;
      align-items: center;
    }
    
    &-center {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: var(--axiom-card-center-padding, 0 var(--axiom-spacing-sm));
      min-width: 0;
    }
    
    &-right {
      flex-shrink: 0;
      min-width: 0;
      max-width: 30%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }

  // 响应式调整
  @media (max-width: 768px) {
    &__top {
      padding: var(--axiom-card-mobile-top-bottom-padding, 10px var(--axiom-spacing-md));
      min-height: var(--axiom-card-mobile-top-bottom-min-height, 40px);
      
      &-left,
      &-right {
        max-width: var(--axiom-card-mobile-top-left-right-max-width, 20%);
      }
      
      &-center .axiom-card__header {
        .axiom-card__title {
          font-size: var(--axiom-card-mobile-title-font-size, 1.1rem);
        }
        
        .axiom-card__subtitle {
          font-size: var(--axiom-card-mobile-subtitle-font-size, 0.8rem);
        }
      }
    }
    
    &__content .axiom-card__body {
      padding: var(--axiom-card-mobile-body-padding, var(--axiom-spacing-md));
    }
    
    &__bottom {
      padding: var(--axiom-card-mobile-top-bottom-padding, 10px var(--axiom-spacing-md));
      min-height: var(--axiom-card-mobile-top-bottom-min-height, 40px);
    }
  }
  
  @media (max-width: 480px) {
    &__top {
      padding: var(--axiom-card-sm-top-bottom-padding, var(--axiom-spacing-sm) 10px);
      min-height: var(--axiom-card-sm-top-bottom-min-height, 36px);
      
      &-left,
      &-right {
        max-width: var(--axiom-card-sm-top-left-right-max-width, 15%);
      }
    }
    
    &__content .axiom-card__body {
      padding: var(--axiom-card-sm-body-padding, var(--axiom-spacing-sm));
    }
    
    &__bottom {
      padding: var(--axiom-card-sm-top-bottom-padding, var(--axiom-spacing-sm) 10px);
      min-height: var(--axiom-card-sm-top-bottom-min-height, 36px);
    }
  }

  // 紧凑模式 - 适合移动端列表页面
  &--compact {
    @media (max-width: 768px) {
      margin-bottom: var(--axiom-card-compact-mobile-margin-bottom, var(--axiom-spacing-md));
      
      .axiom-card__body {
        padding: var(--axiom-card-compact-mobile-body-padding, var(--axiom-spacing-sm) var(--axiom-spacing-md));
      }
    }
    
    @media (max-width: 480px) {
      margin-bottom: var(--axiom-card-compact-sm-margin-bottom, var(--axiom-spacing-sm));
      
      .axiom-card__body {
        padding: var(--axiom-card-compact-sm-body-padding, 6px 10px);
      }
    }
  }

  &--hoverable {
    &:hover {
      transform: translateY(-4px);
      box-shadow: var(--axiom-shadow-light);
    }
  }

  &--bordered-footer {
    .axiom-card__bottom {
        border-top: 1px solid var(--axiom-border-color);
        padding-top: var(--axiom-spacing-md);
    }
  }

  .axiom-card__top-right {
    .el-dropdown {
      .more-button {
        padding: 4px;
        border-radius: var(--axiom-border-radius-small);
        cursor: pointer;
        color: var(--axiom-text-color-secondary);
        transition: background-color 0.2s ease;
        font-size: 1.2rem;
        display: inline-flex;
        align-items: center;

        &:hover {
            background-color: var(--axiom-fill-color-light, var(--axiom-bg-color-hover));
            color: var(--axiom-text-color-primary);
        }
      }
    }
  }

  // When hovering over a card, reveal the 'more' button within its header
  &:hover {
      .more-button {
          opacity: 1;
      }
  }

  .axiom-card-footer {
    padding: var(--axiom-spacing-md) var(--axiom-spacing-lg);
    border-top: 1px solid var(--axiom-border-color);
  }

  // Handle actions visibility on hover
  .axiom-dropdown {
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  }

  &:hover {
    .axiom-dropdown {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

// Cyberpunk 主题专属“特效”
html.theme-cyberpunk .axiom-card {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  position: relative;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.1);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: var(--primary-glow);
    border-color: var(--primary-color);
  }
  
  &__top, &__bottom {
    background: rgba(0, 255, 255, 0.05);
    border-color: var(--glass-border);
    backdrop-filter: blur(2px); // 轻微模糊，增加层次
  }

  &__top {
    border-bottom: 1px solid var(--glass-border);
  }

  &__bottom {
    border-top: 1px solid var(--glass-border);
  }
}

html.theme-neon .axiom-card {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  position: relative;
  box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.1);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: var(--primary-glow);
    border-color: var(--primary-color);
  }

  &__top, &__bottom {
    background: rgba(var(--primary-color-rgb), 0.05);
    border-color: var(--glass-border);
    backdrop-filter: blur(2px);
  }

  &__top {
    border-bottom: 1px solid var(--glass-border);
  }

  &__bottom {
    border-top: 1px solid var(--glass-border);
  }
}

// Rainbow Cyber 主题专属“特效”
html.theme-rainbow-cyber .axiom-card {
  background: var(--glass-bg);
  border: 1px solid transparent;
  box-shadow: var(--box-shadow-base);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    background: var(--rainbow-gradient);
    background-size: 200% 200%;
    animation: rainbow-pulse 4s linear infinite;
    z-index: -1;
    border-radius: inherit;
  }

  &:hover {
    box-shadow: var(--primary-glow);
  }

  &__top, &__bottom {
    background: rgba(var(--primary-color-rgb), 0.1);
    border-color: var(--glass-border);
    backdrop-filter: blur(2px);
  }
}